<script setup>
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import {
  GetModelsService,
  AlgUploadService,
  AlgSelectService
} from '@/api/algorithm.js'
import { InfoMessage, SuccessMessage } from '@/utils/message'
const visibleDrawer = ref(false)
const uploadRef = ref()

// 选中的模型
const selectedModel = ref()

// 缓冲参数
const loading = ref(false)

// 已经上传的算法模型列表
const modelOptions = ref([])
const getModelOptions = async () => {
  // 置空原来的选项列表
  modelOptions.value = []
  loading.value = true
  const {
    data: { data }
  } = await GetModelsService()
  loading.value = false
  console.log(data)

  data.forEach((item) => {
    let modelData = { label: item.label, value: item.value }
    modelOptions.value.push(modelData)
  })
  console.log('model', modelOptions.value)
}
const algId = ref()

// 显示弹窗
const open = (id, model) => {
  algId.value = id
  if (model !== null) {
    isSelect.value = true
    selectedModel.value = model
  }
  visibleDrawer.value = true
  getModelOptions()
}

// 关闭弹窗
const emit = defineEmits(['success'])
const closeDialog = () => {
  visibleDrawer.value = false
  isSelect.value = false
  emit('success')
  if (!isSelect.value) {
    uploadRef.value.clearFiles()
  }
}

// 上传模型
const uploadModel = async () => {
  let formData = new FormData()
  formData.append('file', fileValue.value)
  formData.append('id', algId.value)

  const {
    data: { message }
  } = await AlgUploadService(formData)
  SuccessMessage(message)
}

// 选择模型
const selectModel = async () => {
  const data = {
    model: selectedModel.value,
    algId: algId.value
  }

  const {
    data: { message }
  } = await AlgSelectService(data)

  SuccessMessage(message)
  // emit('success')
}

// 上传
const fileValue = ref()
const handleUpload = async () => {
  if (!isSelect.value && fileValue.value == null) {
    InfoMessage('文件不能为空')
  } else {
    ElMessageBox.confirm('确认上传?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      //
      .then(async () => {
        // 成功回调
        console.log(isSelect.value)

        isSelect.value ? await selectModel() : await uploadModel()
        closeDialog()
      })
      .catch(() => {
        // 上传成功之后删除文件信息
        uploadRef.value.clearFiles()
      })
  }
}

// 关闭弹窗
// 清除校验数据
const resetForm = () => {
  //   nodeForm.value.clearValidate()
}

defineExpose({
  open
})

// 是否启动下拉框
const isSelect = ref(false)

const handleChange = (file) => {
  fileValue.value = file.raw
}

// 切换模式
const onChange = () => {
  if (isSelect.value) {
    getModelOptions()
  }
}
</script>

<template>
  <el-dialog
    v-model="visibleDrawer"
    title="算法模型"
    direction="rtl"
    width="450"
    align-center
    style="padding-left: 25px"
    @open="resetForm"
  >
    <template #header>
      选择已经上传的模型：
      <el-switch v-model="isSelect" @change="onChange" />
    </template>
    <div v-if="isSelect" v-loading="loading">
      <el-select
        v-model="selectedModel"
        placeholder="请选择"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in modelOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div v-else>
      <el-upload
        class="upload-demo"
        drag
        show-file-list
        :on-change="handleChange"
        :auto-upload="false"
        ref="uploadRef"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          Drop file here or <em>click to upload</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="handleUpload"
          style="width: 130px; margin-left: 30px"
          >{{ isSelect ? '选择' : '上传 ' }}</el-button
        ><el-button @click="closeDialog" style="width: 100px; margin-left: 50px"
          >取消</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
h1 {
  margin: 0;
  padding: 0;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fff;
  background-color: rgba(148, 144, 144, 0.3) 25;
}

.header {
  display: flex;
}

.table {
  box-sizing: content-box;
}

ul {
  padding: 20px 20px;
  display: flex;
  align-items: stretch;
  // background-color: rgb(49, 56, 98);
  margin-bottom: 20px;
  // align-content: center;
  align-items: center;
  // justify-content: center;
}

ul li {
  list-style: none;
  // margin-bottom: 20px;
  padding: 0;
  // line-height: 60px;
}

.select_box {
  /* 默认placeholder样式 */
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 30px;
  }

  /* 默认框状态样式更改 */
  :deep .el-input__wrapper {
    height: 45px;
    color: #4b617a;
    background-color: rgb(58, 65, 106) !important;
    box-shadow: none !important;
    /* 使用none替代透明边框 */
  }

  /* 修改下拉框focus时的样式 */
  :deep .is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px #8091a5 inset !important;
  }

  /* 清除按钮颜色 */
  // :deep .el-select__caret {
  //   color: #fff !important;
  // }

  /* 选中字体色 */
  :deep .el-input__inner {
    color: #fff !important;
  }
}

/* 下拉框-展开样式 */
/* 展开下拉背景及边框 */
:deep .el-popper {
  background-color: #8091a5 !important;
  border: 1px solid #8091a5 !important;
}

/* 下拉项hover样式 */
.el-select-dropdown__item.hover {
  background-color: #4b87dbe0 !important;
}

/* 下拉项颜色 */
.el-select-dropdown__item {
  color: #fff !important;
  text-align: center;
  background-color: #435984;
}

/* 箭头按钮样式（通常不需要修改背景色，只修改边框色即可） */
:deep .el-popper .el-popper__arrow::before {
  border-top-color: #fff !important;
  /* 修改箭头边框颜色 */
}
.add-task {
  width: 273px;
  height: 123px;
  text-align: center;
  line-height: 123px;
  color: #727070;
  border-radius: 3px;
  border: #727070 solid 1px;
  cursor: pointer;
  margin-left: 15px;

  &:hover {
    border-color: #fff;
    color: #fff;
  }
}

//滚动条
/* 定制滚动条的整体部分 */
::-webkit-scrollbar {
  width: 12px;
}

/* 定制滚动条的轨道 */
::-webkit-scrollbar-track {
  background: #e1e9f0; /* 更浅一些的蓝色 */
}

/* 定制滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: #3f527d; /* 深蓝色 */
}

/* 当鼠标悬停在滑块上时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #3b5ba0; /* 更深一点的蓝色 */
}

input {
  padding-left: 10px;
  /* width: 273px;/ */
  /* width: 200px; */
  height: 36px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgb(58, 65, 106);
  /* opacity: 0.8; */
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #8091a5;
  line-height: 24px;
  /* text-align: center; */
  font-style: normal;
  text-transform: none;
  outline: none;
  background-color: rgb(58, 65, 106);
}

//下拉框
/* styles/custom-elements.css */
.el-select .el-input .el-input__inner {
  background-color: #33608f !important; /* 背景颜色 */
  color: #ffffff; /* 文字颜色 */
  border-color: #213c58; /* 边框颜色 */
}

.el-select .el-input .el-input__inner:hover {
  border-color: #0056b3; /* 鼠标悬停时的边框颜色 */
}

.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input.is-active .el-input__inner {
  border-color: #0056b3; /* 获得焦点时的边框颜色 */
}

.el-select-dropdown {
  background-color: #007bff; /* 下拉菜单背景颜色 */
}

.el-select-dropdown li {
  color: #ffffff; /* 下拉菜单文字颜色 */
}

.el-select-dropdown li.hover,
.el-select-dropdown li:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}
</style>
